<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>注册页面</title>
    <style type="text/css"></style>
    <script type="text/javascript" src="jquery-3.3.1.min.js"></script>
    <link rel="icon" href="images/register.png" type="img/x-ico" />
</head>

<body>
<class class="box">
    <h2>注册信息填写</h2>
    <form>
        <div class="inputbox">
            <input type="text" id="userName" name="" maxlength="20" required="">
            <label>用户名</label>
        </div>
        <div class="inputbox">
            <input type="text" id="userId" maxlength="11" name="" required="">
            <label>用户账号(11位纯数字)</label>
        </div>
        <div class="inputbox">
            <input type="password" id="userPassword" maxlength="20" name="" required="">
            <label>用户密码(纯数字)</label>
        </div>
        <div class="inputbox">
            <input type="radio" id="studentType" name="type" onclick="readRadio()" value="1" checked="checked" />
            <label size="20px">学生</label>
        </div>
        <div class="inputbox">
            <input type="radio" id="manageType" name="type" onclick="readRadio()" value="4" />
            <label size="20px">管理员</label>
        </div>

        <input type="button" id="b" name="" value="返回" onclick="javascript:back()">
        <input type="button" id="s" name="" value="注册" >
    </form>
</class>
</body>

</html>

<style>
    body {
        margin: 0px;
        padding: 0px;
        font-family: 宋体;
        /*设置字体为宋体*/
        background-image: url(images/library.jpg);
        background-size: 100% 100%;
        background-attachment: fixed;
        /*背景图片尺寸为覆盖cover*/
    }

    .box {
        position: absolute;
        /*定位方式绝对定位absolute*/
        top: 50%;
        left: 50%;
        /*顶和高同时设置50%实现的是同时水平垂直居中效果*/
        transform: translate(-50%, -50%);
        /*实现块元素百分比下居中*/
        width: 450px;
        padding: 50px;
        background: rgba(0, 0, 0, .8);
        /*背景颜色为黑色，透明度为0.8*/
        box-sizing: border-box;
        /*box-sizing设置盒子模型的解析模式为怪异盒模型，
    将border和padding划归到width范围内*/
        box-shadow: 0px 15px 25px rgba(0, 0, 0, .5);
        /*边框阴影  水平阴影0 垂直阴影15px 模糊25px 颜色黑色透明度0.5*/
        border-radius: 15px;
        /*边框圆角，四个角均为15px*/
    }

    .box h2 {
        margin: 0 0 30px;
        padding: 0;
        color: #fff;
        text-align: center;
        /*文字居中*/
    }

    .box .inputbox {
        position: relative;
    }

    .box .inputbox input {
        width: 100%;
        padding: 10px 0;
        font-size: 16px;
        color: #fff;
        letter-spacing: 1px;
        /*字符间的间距1px*/
        margin-bottom: 30px;
        border: none;
        border-bottom: 1px solid #fff;
        outline: none;
        /*outline用于绘制元素周围的线
    outline：none在这里用途是将输入框的边框的线条使其消失*/
        background: transparent;
        /*背景颜色为透明*/
    }

    .box .inputbox label {
        /*<label> 标签为 input 元素定义标注（标记）*/
        position: absolute;
        top: 0px;
        left: 0px;
        padding: 10px 0;
        font-size: 16px;
        color: #fff;
        pointer-events: none;
        /*鼠标事件消失，比如说选中文字，光标定位，超链接下划线*/
        transition: .5s;
        /*过渡时间5s*/
    }

    .box .inputbox input:focus~label,
    .box .inputbox input:valid~label {
        top: -28px;
        left: 0;
        color: #03a9f4;
        font-size: 15px;
    }

    .box .inputbox input:focus~label1,
    .box .inputbox input:valid~label1 {
        top: -18px;
        left: 0;
        color: white;
        font-size: 14px;
    }

    /*.box input[type="reset"] {*/
        /*background: transparent;*/
        /*border: none;*/
        /*outline: none;*/
        /*font-size: 16px;*/
        /*color: #fff;*/
        /*background: #03a9f4;*/
        /*padding: 15px 20px;*/
        /*cursor: pointer;*/
        /*!*光标呈现为指示链接的指针（一只手）*!*/
        /*border-radius: 10px;*/
        /*position: relative;*/
        /*left: 60px;*/
    /*}*/

    #b{
        background: transparent;
        border: none;
        outline: none;
        font-size: 16px;
        color: #fff;
        background: #03a9f4;
        padding: 15px 20px;
        cursor: pointer;
        /*光标呈现为指示链接的指针（一只手）*/
        border-radius: 10px;
        position: relative;
        left: 0px;
    }

    #s{
        background: transparent;
        border: none;
        outline: none;
        font-size: 16px;
        color: #fff;
        background: #03a9f4;
        padding: 15px 20px;
        cursor: pointer;
        /*光标呈现为指示链接的指针（一只手）*/
        border-radius: 10px;
        position: relative;
        top: auto;
        left: 180px;
    }

    .box inout[type="radio"] {
        background: transparent;
        cursor: pointer;
    }
</style>

<script>
    var userType = 1
    function back() {
        window.location.href="Home.html"
    }

    function readRadio() {
        var items = document.getElementsByName("type")
        for(var i = 0; i < items.length; i++) {
            if(items[i].checked) {
                userType = items[i].value
                console.log(userType)
            }
        }
    }

    $("#s").click(function(){
        var user = {
            userName:$("#userName").val(),
            userId:$("#userId").val(),
            userPassword:$("#userPassword").val(),
            userStatus:userType
        }
        if(user.userName!=""&&user.userId!=""){
            if(user.userPassword!=""){
                $.ajax({
                    type: 'post',//get是获取数据，post是带数据的向服务器发送请求
                    url: '/user/register',
                    dataType: 'json',
                    data: JSON.stringify(user),
                    contentType: "application/json",
                    success: function (res) {
                        alert(res.msg)
                        console.log(res)
                        if(res.code==122){
                            window.location.href="Login.html"
                        }
                    },
                    error: function () {
                        alert("数据输入有误，请重新输入！");
                    }
                })
            }else {
                alert("用户密码不能为空！")
            }
        }else {
            alert("用户名或用户账户不能为空！")
        }


    })

</script>
